<html>
    <head>
        <meta charset="utf-8">
        <title>显示页面</title>
    </head>
    <body>
        输入id查询 <input type = 'text' id = 'id' name = 'id'>
        <button onclick="id_test()">提交</button></br>

        输入名字查询 <input type = 'text' id = 'name' name = 'name'>
        <button onclick="name_test()">提交</button></br>

        查询历史记录 <button onclick="all_test()">提交</button></br>

        <div id="result-container">

        </div>
    </body>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
        function id_test(){
            var user_info = {
                id:document.getElementById("id").value
            }
            $.ajax({
                type: "post",
                url : "http://47.120.76.102:8080/display_by_id",
                data: JSON.stringify(user_info),
                dataType: "json",
                success: function(res, statu, xhr){
                    var finalHtml = "";
                    if(res == null){
                        finalHtml += '<div>'+ "没有查询到任何结果" +'</div>';
                    }
                    else {
                        for(var data of res){
                            finalHtml +='<div>'+data.id+" "+data.name + " " +  data.time +'</div>';
                        }
                    }
                    document.getElementById("result-container").innerHTML = finalHtml;
                    
                },
                error: function(xhr){
                    alert(JSON.stringify(xhr));
                }
            });
        }
    </script>
    <script>
        function name_test(){
            var user_info = {
                name:document.getElementById("name").value
            }
            $.ajax({
                type: "post",
                url : "http://47.120.76.102:8080/display_by_name",
                data: JSON.stringify(user_info),
                dataType: "json",
                success: function(res, statu, xhr){
                    var finalHtml = "";
                    if(res == null){
                        finalHtml += '<div>'+ "没有查询到任何结果" +'</div>';
                    }
                    else {
                        for(var data of res){
                            finalHtml +='<div>'+data.id+" "+data.name + " " +  data.time +'</div>';
                        }
                    }
                    document.getElementById("result-container").innerHTML = finalHtml;
                    
                },
                error: function(xhr){
                    alert(JSON.stringify(xhr));
                }
            });
        }
    </script>
    <script>
        function all_test(){
            $.ajax({
                type: "post",
                url : "http://47.120.76.102:8080/display_all_note",
                dataType: "json",
                success: function(res, statu, xhr){
                    var finalHtml = "";
                    if(res == null){
                        finalHtml += '<div>'+ "没有查询到任何结果" +'</div>';
                    }
                    else {
                        for(var data of res){
                            finalHtml +='<div>'+data.id+" "+data.name + " " +  data.time +'</div>';
                        }
                    }
                    document.getElementById("result-container").innerHTML = finalHtml;
                    
                },
                error: function(xhr){
                    alert(JSON.stringify(xhr));
                }
            });
        }
    </script>
    
</html>
